<template>
	<view class="detailView">
		<goBack :title="'食物榜单'"></goBack>

		<template v-if="!this.isShow">
			<view class="foodsList">
				<view class="foodsList_title">
					<text>{{ foodsList.title }}</text>
					<text>{{foodsList.description}}</text>
				</view>

				<view class="foodsList_item">
					<li v-for="(item, index) in foodsList.foods" :key="index">
						<view class="item_left">
							<image v-if="item.thumb_image_url" :src="item.thumb_image_url" />
							<image v-else src="../../static/mis_default_error.png" />
							<text>{{index+1}}</text>
						</view>
						<view class="item_right">
							<view class="item_name">
								<text>{{ item.name }}</text>
							</view>
							<view class="item_content">
								<text>{{ item.calory }}</text>千卡 / {{ item.weight }}克
							</view>
						</view>
					</li>
				</view>
			</view>
		</template>

		<u-loading-page :loading="isShow" loading-text="loading..."></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				foodsList: {},
			};
		},
		onLoad(options) {
			this.isShow = true;
			let id = options.id;
			uni.request({
				url: `https://food.boohee.com/fb/v1/food_rankings/${id}.json`,
				success: (res) => {
					this.foodsList = res.data;
					this.isShow = false;
				}
			})
		}
	}
</script>

<style lang="scss">
	.detailView {
		.foodsList {
			height: 93vh;
			background: white;
			overflow-y: auto;

			.foodsList_title {
				background: white;
				padding: 30px 20px;
				font-size: 25px;
				font-weight: bold;
				text-align: left;
				box-shadow: 0 5px 10px 1px #ededed;

				text {
					&:nth-of-type(2) {
						display: block;
						font-size: 13px;
						font-weight: normal;
						color: #999999;
						margin-top: 10px;
					}
				}
			}

			.foodsList_item {
				li {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 20px;
					list-style: none;

					.item_left {
						position: relative;

						image {
							border-radius: 10px;
							width: 60px;
							height: 60px;
						}

						text {
							position: absolute;
							content: "";
							left: 0;
							top: 0;
							width: 20px;
							height: 20px;
							border-radius: 12px 0 12px 0;
							background: #FED039;
							color: whitesmoke;
							font-size: 13px;
							line-height: 20px;
						}
					}

					.item_right {
						margin-left: 20px;
						text-align: left;

						.item_name {
							font-weight: bold;
							font-size: 18px;
						}

						.item_content {
							font-size: 14px;
							color: #999999;
							margin-top: 5px;

							text {
								color: #FF706A;
							}
						}
					}
				}
			}
		}
	}
</style>
